<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /*
        说明:
            1. 继承是指属性在页面中流动的方式。 除非另有定义，子元素通常会采用父元素的特征。
            2. 由于段落标记（子元素）位于正文标记（父元素）内，因此它将采用指定给正文标记的任何样式。
         */
        body {
            color: red;
            font-family: Arial;
        }

        /*
        说明:
            1. 自己的属性会优先, 所以浏览器中使用了该类的元素的字体颜色为蓝色, 覆盖了父类的红色.
            2. 以.开头的是类选择器.
        */
        .my-p {
            color: blue;
        }

        /*
        说明:
            这是id选择器, 但是一般不常用.
        */
        #p1 {
            color: yellow;
        }

        .div_1 h1 {
            color: red;
        }

        /*
        说明:
            1. 从该设置中可以发现: 用后代选择器时不会局限于子类在那一层, 所有子类都会被同步设置.
        */
        .div_1 h2 {
            color: blue;
        }

        /*
        说明:
            1. 后代选择器设置的CSS样式不会影响到父级。
            2. 父级和子级之间需要用空格隔开。
            3. 后代选择器可以存在多层级父级，并不局限在单一父子级之间，层级越深所设置的CSS样式优先级越高。
                - 该后代选择器更加具体, 所以覆盖了`.div_1 h1`中的设置.
        */
        .div_1 .div_2 h1 {
            color: yellow;
        }

        .baby{
            color:black;
        }
        .father .baby{
            color:red;
        }
        .mother .baby{
            color:blue;
        }
        .house .father .baby{
            color:green;
        }

    </style>
</head>
<body>
<p>我是p标签1</p>
<p class="my-p">我是p标签2</p>
<p id="p1">我是p标签3</p>

<hr />

<div class="div_1">
    <h1>我是h1</h1>
    <h2>我是h2</h2>
    <h3>我是h3</h3>
    <div class="div_2">
        <h1>我是h1</h1>
        <h2>我是h2</h2>
        <h3>我是h3</h3>
    </div>
</div>

<p class="baby">无法无天的熊孩子</p>
<div class="father">
    <p class="baby">亲爹带娃</p>
</div>
<div class="mother">
    <p class="baby">亲妈带娃</p>
</div>
<div class="house">
    <div class="father">
        <p class="baby">亲爹在家里带娃</p>
    </div>
</div>
<hr />
</body>
</html>